

angular.module("loginApp", [])

    .controller("loginCtrl", ($scope, $http, $interval, $filter) => {

        /**
         * 格式化时间
         * @param milliSec 时间
         * @param fmt format
         */
        let time = (milliSec, fmt) => $filter('date')(milliSec, fmt);
        const colors = ['#FF0000', '#FFFFFF', '#675bba'];
        const fmts = ['yyyy-MM-dd HH:mm:ss', 'yyyy-MM-dd', 'HH:mm'];
        const chartContainer = document.getElementById("login-box");

        let loadData = () => {
            let y = [];
            let x = [];
            $http.get("http://127.0.0.1:8088/avatar/reactive/loginResponse").then(resp => {
                if (resp.status != 200 || resp.data == null) {
                    return;
                }
                resp.data.forEach((d, i, a) => {
                    y.push(d.timeConsumed);
                    x.push(time(d.requestTime, fmts[2]));
                });

                let echart = echarts.init(chartContainer);
                let options = {
                    title: {
                        x: "center",
                        text: "登录服务响应时间(ms)",
                        textStyle: {color: colors[1], fontSize: 4}
                    },
                    grid: {
                        left: "10%",
                        right: "5%",
                        top: 20,
                        bottom: "10%"
                    },
                    xAxis: [
                        {
                            type: 'category',
                            axisTick: {
                                alignWithLabel: true
                            },
                            axisLine: {
                                onZero: false,
                                lineStyle: {color: colors[1]}
                            },
                            axisLabel: {
                                interval: 0, rotate: 45,
                                textStyle: {fontSize: 4}
                            },
                            data: x
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            splitLine: {show: false},
                            axisLine: {
                                lineStyle: {color: colors[1]}
                            },
                            axisLabel: {
                                textStyle: {fontSize: 4}
                            }
                        }
                    ],
                    series: [
                        {
                            name: '登录服务响应时间(ms)',
                            type: 'line',
                            symbol: "none",
                            smooth: true,
                            data: y
                        }
                    ]
                };

                echart.setOption(options);
                window.onresize = echart.resize();
            });

        };

        loadData();
        //一分钟调一次
        $interval(() => loadData(), 1000 * 60);
    });

